<template>
  <div class="house-type-table">
    <el-table
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
    >
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="houseTypeName" label="户型名称" min-width="120" />
      <el-table-column prop="totalArea" label="建筑面积" width="100">
        <template #default="{ row }">
          {{ row.totalArea }}㎡
        </template>
      </el-table-column>
      <el-table-column prop="usableArea" label="套内面积" width="100">
        <template #default="{ row }">
          {{ row.usableArea ? `${row.usableArea}㎡` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="bedroomCount" label="卧室数" width="80" />
      <el-table-column prop="bathroomCount" label="卫生间数" width="100" />
      <el-table-column prop="orientation" label="朝向" width="100">
        <template #default="{ row }">
          {{ row.orientation || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="balconyCount" label="阳台数" width="80" />
      <el-table-column prop="suitableCrowd" label="适用人群" min-width="120">
        <template #default="{ row }">
          {{ row.suitableCrowd || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template #default="{ row }">
          <el-tag :type="row.status ? 'success' : 'danger'">
            {{ row.status ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160">
        <template #default="{ row }">
          {{ formatDateTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(row)"
            :disabled="!hasPermission('region:house-type:edit')"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row)"
            :disabled="!hasPermission('region:house-type:remove')"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/store/user'
import { formatDateTime } from '@/utils'

// Props
interface Props {
  data: any[]
  companyId?: number
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  companyId: 0,
  loading: false
})

// Emits
const emit = defineEmits<{
  edit: [houseType: any]
  delete: [houseType: any]
  refresh: []
}>()

// 用户store
const userStore = useUserStore()

// 方法
const hasPermission = (permission: string) => {
  return userStore.userPermissions.includes(permission)
}

const handleEdit = (houseType: any) => {
  emit('edit', houseType)
}

const handleDelete = (houseType: any) => {
  emit('delete', houseType)
}
</script>

<style lang="scss" scoped>
.house-type-table {
  .el-table {
    .el-table__header {
      th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 600;
      }
    }
  }
}
</style>
